 $(window).load(function() {
     $(".loading").fadeOut()
 })
 $(function() {
     echarts_1();
     echarts_2();
     echarts_3();
     echarts_4();
     echarts_5();
     zb1();
     zb2();
     zb3();
     zb4();

     function echarts_1() {
         // 基于准备好的dom，初始化echarts实例
         var myChart = echarts.init(document.getElementById('echart1'));
         option = {
             tooltip: {
                 trigger: 'item',
                 formatter: "{b} : {c} ({d}%)"
             },
             legend: {
                 right: 10,
                 top: 30,
                 height: 140,
                 itemWidth: 10,
                 itemHeight: 10,
                 itemGap: 10,
                 textStyle: {
                     color: 'rgba(255,255,255,.6)',
                     fontSize: 12
                 },
                 orient: 'vertical',
                 data: ['图例1', '图例2', '图例3', '图例4']
             },
             calculable: true,
             series: [{
                 name: ' ',
                 color: ['#62c98d', '#2f89cf', '#4cb9cf', '#53b666', '#62c98d', '#205acf', '#c9c862', '#c98b62', '#c962b9', '#7562c9', '#c96262'],
                 type: 'pie',
                 radius: [30, 70],
                 center: ['35%', '50%'],
                 roseType: 'radius',
                 label: {
                     normal: {
                         show: true
                     },
                     emphasis: {
                         show: true
                     }
                 },

                 lableLine: {
                     normal: {
                         show: false
                     },
                     emphasis: {
                         show: true
                     }
                 },

                 data: [{
                         value: 10,
                         name: '图例1'
                     },
                     {
                         value: 15,
                         name: '图例2'
                     },
                     {
                         value: 25,
                         name: '图例3'
                     },
                     {
                         value: 30,
                         name: '图例4'
                     }
                 ]
             }, ]
         };

         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
         window.addEventListener("resize", function() {
             myChart.resize();
         });
     }

     function echarts_2() {
         // 基于准备好的dom，初始化echarts实例
         var myChart = echarts.init(document.getElementById('echart2'));

         option = {
             tooltip: {
                 trigger: 'item',
                 formatter: "{b} : {c} ({d}%)"
             },
             legend: {
                 right: 10,
                 top: 30,
                 height: 140,
                 itemWidth: 10,
                 itemHeight: 10,
                 itemGap: 10,
                 textStyle: {
                     color: 'rgba(255,255,255,.6)',
                     fontSize: 12
                 },
                 orient: 'vertical',
                 data: ['图例1', '图例2', '图例3', '图例4']
             },
             calculable: true,
             series: [{
                 name: ' ',
                 color: ['#62c98d', '#205acf', '#c9c862', '#c98b62', '#c962b9', '#7562c9', '#c96262'],
                 type: 'pie',
                 radius: [30, 70],
                 center: ['35%', '50%'],
                 roseType: 'radius',
                 label: {
                     normal: {
                         show: true
                     },
                     emphasis: {
                         show: true
                     }
                 },

                 lableLine: {
                     normal: {
                         show: true
                     },
                     emphasis: {
                         show: true
                     }
                 },

                 data: [{
                         value: 50,
                         name: '图例1'
                     },
                     {
                         value: 45,
                         name: '图例2'
                     },
                     {
                         value: 35,
                         name: '图例3'
                     },
                     {
                         value: 30,
                         name: '图例4'
                     }
                 ]
             }, ]
         };

         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
         window.addEventListener("resize", function() {
             myChart.resize();
         });
     }

     function echarts_3() {
         // 基于准备好的dom，初始化echarts实例
         var myChart = echarts.init(document.getElementById('echart3'));

         option = {
             tooltip: {
                 trigger: 'axis',
                 axisPointer: {
                     lineStyle: {
                         color: '#dddc6b'
                     }
                 }
             },
             grid: {
                 left: '10',
                 top: '20',
                 right: '30',
                 bottom: '10',
                 containLabel: true
             },

             xAxis: [{
                 type: 'category',
                 boundaryGap: false,
                 axisLabel: {
                     textStyle: {
                         color: "rgba(255,255,255,.6)",
                         fontSize: 16,
                     },
                 },
                 axisLine: {
                     lineStyle: {
                         color: 'rgba(255,255,255,.1)'
                     }

                 },

                 data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']

             }, {

                 axisPointer: {
                     show: false
                 },
                 axisLine: {
                     show: false
                 },
                 position: 'bottom',
                 offset: 20,



             }],

             yAxis: [{
                 type: 'value',
                 axisTick: {
                     show: false
                 },
                 axisLine: {
                     lineStyle: {
                         color: 'rgba(255,255,255,.1)'
                     }
                 },
                 axisLabel: {
                     textStyle: {
                         color: "rgba(255,255,255,.6)",
                         fontSize: 16,
                     },
                 },

                 splitLine: {
                     lineStyle: {
                         color: 'rgba(255,255,255,.1)'
                     }
                 }
             }],
             series: [{
                     name: '结算率',
                     type: 'line',
                     smooth: true,
                     symbol: 'circle',
                     symbolSize: 5,
                     showSymbol: false,
                     lineStyle: {

                         normal: {
                             color: '#dddc6b',
                             width: 4
                         }
                     },
                     areaStyle: {
                         normal: {
                             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                 offset: 0,
                                 color: 'rgba(221, 220, 107, 0.4)'
                             }, {
                                 offset: 0.8,
                                 color: 'rgba(221, 220, 107, 0.1)'
                             }], false),
                             shadowColor: 'rgba(0, 0, 0, 0.1)',
                         }
                     },
                     itemStyle: {
                         normal: {
                             color: '#dddc6b',
                             borderColor: 'rgba(221, 220, 107, .1)',
                             borderWidth: 12
                         }
                     },
                     data: [3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4]

                 },

             ]

         };

         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
         window.addEventListener("resize", function() {
             myChart.resize();
         });
     }

     function echarts_4() {
         // 基于准备好的dom，初始化echarts实例
         var myChart = echarts.init(document.getElementById('echart4'));
         option = {
             tooltip: {
                 trigger: 'axis',
                 axisPointer: {
                     type: 'shadow'
                 }
             },
             legend: {
                 data: ['2017年', '2018年'],
                 align: 'right',
                 right: '40%',
                 top: '0%',
                 textStyle: {
                     color: "#fff",
                     fontSize: '16',

                 },
                 itemWidth: 16,
                 itemHeight: 16,
                 itemGap: 35
             },
             grid: {
                 left: '0%',
                 top: '40px',
                 right: '0%',
                 bottom: '2%',
                 containLabel: true
             },
             xAxis: [{
                 type: 'category',
                 data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                 axisLine: {
                     show: true,
                     lineStyle: {
                         color: "rgba(255,255,255,.1)",
                         width: 1,
                         type: "solid"
                     },
                 },

                 axisTick: {
                     show: false,
                 },
                 axisLabel: {
                     interval: 0,
                     // rotate:50,
                     show: true,
                     splitNumber: 15,
                     textStyle: {
                         color: "rgba(255,255,255,.6)",
                         fontSize: '16',
                     },
                 },
             }],
             yAxis: [{
                 type: 'value',
                 axisLabel: {
                     //formatter: '{value} %'
                     show: true,
                     textStyle: {
                         color: "rgba(255,255,255,.6)",
                         fontSize: '16',
                     },
                 },
                 axisTick: {
                     show: false,
                 },
                 axisLine: {
                     show: true,
                     lineStyle: {
                         color: "rgba(255,255,255,.1	)",
                         width: 1,
                         type: "solid"
                     },
                 },
                 splitLine: {
                     lineStyle: {
                         color: "rgba(255,255,255,.1)",
                     }
                 }
             }],
             series: [{
                 name: '2017年',
                 type: 'bar',
                 data: [2, 3, 3, 9, 15, 12, 6, 4, 6, 7, 4, 10],
                 barWidth: '15', //柱子宽度
                 // barGap: 1, //柱子之间间距
                 itemStyle: {
                     normal: {
                         color: '#2f89cf',
                         opacity: 1,
                         barBorderRadius: 5,
                     }
                 }
             }, {
                 name: '2018年',
                 type: 'bar',
                 data: [1, 4, 5, 11, 12, 9, 5, 6, 5, 6, 3, 9],
                 barWidth: '15',
                 // barGap: 1,
                 itemStyle: {
                     normal: {
                         color: '#62c98d',
                         opacity: 1,
                         barBorderRadius: 5,
                     }
                 }
             }, ]
         };


         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
         window.addEventListener("resize", function() {
             myChart.resize();
         });
     }

     function echarts_5() {
         // 基于准备好的dom，初始化echarts实例
         var myChart = echarts.init(document.getElementById('echart5'));
         option = {
             //  backgroundColor: '#00265f',
             tooltip: {
                 trigger: 'axis',
                 axisPointer: {
                     type: 'shadow'
                 }
             },
             legend: {
                 data: ['2017年', '2018年'],
                 align: 'right',
                 right: '40%',
                 top: '0%',
                 textStyle: {
                     color: "#fff",
                     fontSize: '16',

                 },

                 itemGap: 35
             },
             grid: {
                 left: '0%',
                 top: '40px',
                 right: '0%',
                 bottom: '2%',
                 containLabel: true
             },
             xAxis: [{
                 type: 'category',
                 data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                 axisLine: {
                     show: true,
                     lineStyle: {
                         color: "rgba(255,255,255,.1)",
                         width: 1,
                         type: "solid"
                     },
                 },
                 axisTick: {
                     show: false,
                 },
                 axisLabel: {
                     interval: 0,
                     // rotate:50,
                     show: true,
                     splitNumber: 15,
                     textStyle: {
                         color: "rgba(255,255,255,.6)",
                         fontSize: '16',
                     },
                 },
             }],
             yAxis: [{
                 type: 'value',
                 axisLabel: {
                     //formatter: '{value} %'
                     show: true,
                     textStyle: {
                         color: "rgba(255,255,255,.6)",
                         fontSize: '16',
                     },
                 },
                 axisTick: {
                     show: false,
                 },
                 axisLine: {
                     show: true,
                     lineStyle: {
                         color: "rgba(255,255,255,.1	)",
                         width: 1,
                         type: "solid"
                     },
                 },
                 splitLine: {
                     lineStyle: {
                         color: "rgba(255,255,255,.1)",
                     }
                 }
             }],
             series: [{
                 name: '2017年',
                 type: 'line',

                 data: [2, 6, 3, 8, 5, 8, 10, 13, 8, 5, 6, 9],

                 itemStyle: {
                     normal: {
                         color: '#2f89cf',
                         opacity: 1,

                         barBorderRadius: 5,
                     }
                 }
             }, {
                 name: '2018年',
                 type: 'line',
                 data: [5, 2, 6, 4, 5, 12, 5, 17, 9, 2, 6, 3],
                 barWidth: '15',
                 // barGap: 1,
                 itemStyle: {
                     normal: {
                         color: '#62c98d',
                         opacity: 1,
                         barBorderRadius: 5,
                     }
                 }
             }, ]
         };


         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
         window.addEventListener("resize", function() {
             myChart.resize();
         });
     }

     function zb1() {
         // 基于准备好的dom，初始化echarts实例
         var myChart = echarts.init(document.getElementById('zb1'));
         var v1 = 60 //结算数
         var v2 = 40 //未结算数
         var v3 = v1 + v2 //总订单数
         option = {
             series: [{
                 type: 'pie',
                 radius: ['60%', '70%'],
                 color: '#49bcf7',
                 label: {
                     normal: {
                         position: 'center'
                     }
                 },
                 data: [{
                         value: v1,
                         name: '数量结算率',
                         label: {
                             normal: {
                                 formatter: Math.round(v1 / v3 * 100) + '%',
                                 textStyle: {
                                     fontSize: 30,
                                     color: '#fff',
                                 }
                             }
                         }
                     },
                     {
                         value: v2,
                         label: {
                             normal: {
                                 formatter: function(params) {
                                     return '数量结算率'
                                 },
                                 textStyle: {
                                     color: '#aaa',
                                     fontSize: 16
                                 }
                             }
                         },
                         itemStyle: {
                             normal: {
                                 color: 'rgba(255,255,255,.2)'
                             },
                             emphasis: {
                                 color: '#fff'
                             }
                         },
                     }
                 ]
             }]
         };
         myChart.setOption(option);
         window.addEventListener("resize", function() {
             myChart.resize();
         });
     }

     function zb2() {
         // 基于准备好的dom，初始化echarts实例
         var myChart = echarts.init(document.getElementById('zb2'));
         var v1 = 80 //结算数
         var v2 = 20 //未结算数
         var v3 = v1 + v2 //总订单数
         option = {

             //animation: false,
             series: [{
                 type: 'pie',
                 radius: ['60%', '70%'],
                 color: '#49bcf7',
                 label: {
                     normal: {
                         position: 'center'
                     }
                 },
                 data: [{
                     value: v1,
                     name: '数量结算率',
                     label: {
                         normal: {
                             formatter: Math.round(v1 / v3 * 100) + '%',
                             textStyle: {
                                 fontSize: 24,
                                 color: '#fff',
                             }
                         }
                     }
                 }, {
                     value: v2,
                     label: {
                         normal: {
                             formatter: function(params) {
                                 return '数量结算率'
                             },
                             textStyle: {
                                 color: '#aaa',
                                 fontSize: 16
                             }
                         }
                     },
                     itemStyle: {
                         normal: {
                             color: 'rgba(255,255,255,.2)'
                         },
                         emphasis: {
                             color: '#fff'
                         }
                     },
                 }]
             }]
         };
         myChart.setOption(option);
         window.addEventListener("resize", function() {
             myChart.resize();
         });
     }

     function zb3() {
         // 基于准备好的dom，初始化echarts实例
         var myChart = echarts.init(document.getElementById('zb3'));
         var v1 = 30 //结算金额
         var v2 = 70 //未结算
         var v3 = v1 + v2
         option = {
             series: [{

                 type: 'pie',
                 radius: ['60%', '70%'],
                 color: '#62c98d',
                 label: {
                     normal: {
                         position: 'center'
                     }
                 },
                 data: [{
                     value: v1,
                     name: '金额结算率',
                     label: {
                         normal: {
                             formatter: Math.round(v1 / v3 * 100) + '%',
                             textStyle: {
                                 fontSize: 24,
                                 color: '#fff',
                             }
                         }
                     }
                 }, {
                     value: v2,
                     label: {
                         normal: {
                             formatter: function(params) {
                                 return '金额结算率'
                             },
                             textStyle: {
                                 color: '#aaa',
                                 fontSize: 16
                             }
                         }
                     },
                     itemStyle: {
                         normal: {
                             color: 'rgba(255,255,255,.2)'
                         },
                         emphasis: {
                             color: '#fff'
                         }
                     },
                 }]
             }]
         };
         myChart.setOption(option);
         window.addEventListener("resize", function() {
             myChart.resize();
         });
     }

     function zb4() {
         // 基于准备好的dom，初始化echarts实例
         var myChart = echarts.init(document.getElementById('zb4'));
         var v1 = 90 //结算金额
         var v2 = 10 //未结算
         var v3 = v1 + v2
         option = {
             series: [{

                 type: 'pie',
                 radius: ['60%', '70%'],
                 color: '#29d08a',
                 label: {
                     normal: {
                         position: 'center'
                     }
                 },
                 data: [{
                     value: v1,
                     name: '金额结算率',
                     label: {
                         normal: {
                             formatter: Math.round(v1 / v3 * 100) + '%',
                             textStyle: {
                                 fontSize: 24,
                                 color: '#fff',
                             }
                         }
                     }
                 }, {
                     value: v2,
                     label: {
                         normal: {
                             formatter: function(params) {
                                 return '金额结算率'
                             },
                             textStyle: {
                                 color: '#aaa',
                                 fontSize: 16
                             }
                         }
                     },
                     itemStyle: {
                         normal: {
                             color: 'rgba(255,255,255,.2)'
                         },
                         emphasis: {
                             color: '#fff'
                         }
                     },
                 }]
             }]
         };
         myChart.setOption(option);
         window.addEventListener("resize", function() {
             myChart.resize();
         });
     }
 })